import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

import 'package:get/get.dart';
import 'package:xiaomi/app/modules/tools/customFonts.dart';
import 'package:xiaomi/app/modules/tools/keepAliveWidget.dart';
import 'package:xiaomi/app/modules/tools/screenAdapter.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import '../../../routes/app_pages.dart';
import '../controllers/home_controller.dart';
import '../../tools/httpClient.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({super.key});
  @override
  Widget build(BuildContext context) {
    return KeepAliveWidget(
        child: Scaffold(
      body: Stack(
        children: [
          /// 获取主页内容
          _getHomePage(),

          /// 透明导航栏
          _getAppBar(),

          ///
        ],
      ),
    ));
  }

  Widget _getHomePage() {
    return Positioned(
      top: controller.padingOffset,
      left: 0,
      right: 0,
      bottom: 0,
      child: ListView(
        scrollDirection: Axis.vertical,
        controller: controller.scrollController,
        children: [
/*********************************************/
          ///轮播图
          Container(
            width: ScreenAdapter.width(1080),
            height: ScreenAdapter.height(690),
            decoration: const BoxDecoration(color: Colors.red),
            child: Obx(() => Swiper(
                  itemBuilder: (context, index) {
                    String url =
                        "https://xiaomi.itying.com/${controller.swiperData[index].pic}";
                    return Image.network(
                      url.replaceAll('\\', '/'),
                      fit: BoxFit.fill,
                    );
                  },
                  itemCount: controller.swiperData.value.length,
                  pagination:
                      const SwiperPagination(builder: SwiperPagination.rect),
                  loop: true,
                  autoplay: true,

                  // control: const SwiperControl(),
                )),
            // child: Image.network(
            //   'https://www.itying.com/images/focus/focus02.png',
            //   fit: BoxFit.cover,
            // ),
          ),
/*********************************************/
          /// 卡位图片

          Container(
            width: ScreenAdapter.width(1080),
            height: ScreenAdapter.height(90),
            color: Colors.red,
            child: Image.asset(
              'assets/images/xiaomiBanner.png',
              fit: BoxFit.cover,
            ),
          ),
/*********************************************/
          /// 分类视图
          SizedBox(
            width: ScreenAdapter.width(1080),
            height: ScreenAdapter.height(470),
            // color: Colors.blue,
            child: Obx(() => Swiper(
                  loop: false,
                  pagination:
                      const SwiperPagination(builder: SwiperPagination.rect),
                  itemCount: (controller.categoryData.length / 10).ceil(),
                  itemBuilder: (context, index) {
                    return GridView.builder(
                      itemCount: 10,
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 5,
                        crossAxisSpacing: ScreenAdapter.width(20),
                        mainAxisSpacing: ScreenAdapter.height(20),
                      ),
                      itemBuilder: (BuildContext context, int i) {
                        return Column(
                          children: [
                            Container(
                              width: ScreenAdapter.width(140),
                              height: ScreenAdapter.height(140),
                              child: Image.network(
                                HttpClient.imageUrl(
                                    '${controller.categoryData[index * 10 + i].pic}'),
                                fit: BoxFit.fitHeight,
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(
                                  0, ScreenAdapter.height(4), 0, 0),
                              child: Text(
                                  '${controller.categoryData[index * 10 + i].title}'),
                            )
                          ],
                        );
                      },
                    );
                  },
                )),
          ),
          /*********************************************/
          /// nanner图片
          ///

          Container(
            height: ScreenAdapter.height(350),
            margin: EdgeInsets.fromLTRB(
                ScreenAdapter.width(15), 0, ScreenAdapter.width(15), 0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                image: const DecorationImage(
                    image: AssetImage('assets/images/xiaomiBanner2.png'),
                    fit: BoxFit.cover)),
          ),

          Column(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(15, 20, 15, 10),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '热销甄选',
                      style: TextStyle(
                          fontSize: ScreenAdapter.fontSize(40),
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      '更多手机 >',
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(30)),
                    )
                  ],
                ),
              ),

              /// ************

              Container(
                width: ScreenAdapter.width(1080),
                height: ScreenAdapter.height(738),
                // color: Colors.orange,
                child: Row(
                  children: [
                    /// 左边的轮播图

                    Expanded(
                        flex: 1,
                        child: Obx(() => Container(
                              decoration: const BoxDecoration(
                                  // color: Colors.blue,
                                  ),
                              child: Swiper(
                                itemBuilder: (context, index) {
                                  String url =
                                      "https://xiaomi.itying.com/${controller.swiperData2[index].pic}";

                                  return Container(
                                    margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
                                    color:
                                        const Color.fromRGBO(246, 246, 246, 1),
                                    child: Image.network(
                                      url.replaceAll('\\', '/'),
                                      fit: BoxFit.fill,
                                    ),
                                  );
                                },
                                itemCount: controller.swiperData2.length,
                                pagination: const SwiperPagination(
                                    builder: SwiperPagination.rect),
                                loop: true,
                                autoplay: true,

                                // control: const SwiperControl(),
                              ),
                            ))),

                    /// 右侧的三列
                    Expanded(
                        flex: 1,
                        child: Obx(() => Column(
                              children: controller.hotSellData.map((value) {
                                return Expanded(
                                    flex: 1,
                                    child: Container(
                                      margin: const EdgeInsets.only(
                                          bottom: 5, right: 10),
                                      color: const Color.fromRGBO(
                                          246, 246, 246, 1),
                                      child: Row(
                                        children: [
                                          Expanded(
                                              flex: 3,
                                              child: Container(
                                                child: Column(
                                                  children: [
                                                    SizedBox(
                                                      height:
                                                          ScreenAdapter.height(
                                                              10),
                                                    ),
                                                    Text(
                                                      '${value.title}',
                                                      style: TextStyle(
                                                          fontSize:
                                                              ScreenAdapter
                                                                  .fontSize(38),
                                                          fontWeight:
                                                              FontWeight.bold),
                                                    ),
                                                    SizedBox(
                                                      height:
                                                          ScreenAdapter.height(
                                                              10),
                                                    ),
                                                    Text(
                                                      '${value.subTitle}',
                                                      style: TextStyle(
                                                          fontSize:
                                                              ScreenAdapter
                                                                  .fontSize(
                                                                      30)),
                                                    ),
                                                    SizedBox(
                                                      height:
                                                          ScreenAdapter.height(
                                                              10),
                                                    ),
                                                    Text('价格 ￥${value.price}元',
                                                        style: TextStyle(
                                                            fontSize:
                                                                ScreenAdapter
                                                                    .fontSize(
                                                                        30))),
                                                  ],
                                                ),
                                              )),
                                          Expanded(
                                            flex: 2,
                                            child: Padding(
                                              padding: EdgeInsets.all(
                                                  ScreenAdapter.height(8)),
                                              child: Image.network(
                                                'https://xiaomi.itying.com/${value.pic}'
                                                    .replaceAll('\\', '/'),
                                                fit: BoxFit.cover,
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    ));
                              }).toList(),
                            ))),
                  ],
                ),
              )
            ],
          ),

          Padding(
            padding: const EdgeInsets.fromLTRB(15, 20, 15, 10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '好多商品',
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(40),
                      fontWeight: FontWeight.bold),
                ),
                Text(
                  '更多选择 >',
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(30)),
                )
              ],
            ),
          ),

          Container(
            padding: EdgeInsets.all(ScreenAdapter.width(20)),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              // border: Border
              // color: Colors.red,
            ),
            child: Obx(() => MasonryGridView.count(
                  itemCount: controller.goodSellData.length,
                  crossAxisCount: 2,
                  mainAxisSpacing: 4,
                  crossAxisSpacing: 4,
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return InkWell(
                      onTap: () {
                        print('跳转到详情界面');
                        Get.toNamed(Routes.GOODS_DETAIL, arguments: {
                          'id': controller.goodSellData[index].sId
                        });
                      },
                      child: Container(
                        color: Colors.white,
                        child: Column(
                          children: [
                            Image.network(
                              HttpClient.imageUrl(
                                  '${controller.goodSellData[index].sPic}'),
                              fit: BoxFit.cover,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  left: 10, right: 10, bottom: 5),
                              child: Text(
                                '${controller.goodSellData[index].title}',
                                style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(36),
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(10, 0, 10, 5),
                              child: Text(
                                '${controller.goodSellData[index].subTitle}',
                                style: TextStyle(
                                    fontSize: ScreenAdapter.fontSize(36)),
                              ),
                            ),
                            Container(
                              padding: EdgeInsets.fromLTRB(10, 0, 10, 5),
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '￥${controller.goodSellData[index].price}',
                                textAlign: TextAlign.start,
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                )),
          )
        ],
      ),
    );
  }

  Widget _getAppBar() {
    return Positioned(
        top: 0,
        left: 0,
        right: 0,
        // height: ,
        child: Obx(() => AppBar(
              backgroundColor:
                  Color.fromRGBO(255, 255, 255, controller.appBarAlpha.value),
              leadingWidth: 80 * (1 - controller.appBarAlpha.value),
              leading: Icon(
                CustomIcons.xiaomi,
                color:
                    Color.fromRGBO(0, 0, 0, 1 - controller.appBarAlpha.value),
              ),
              title: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                child: InkWell(
                  onTap: () {
                    Get.toNamed(Routes.SEARCH_PAGE);
                  },
                  child: Container(
                    height: ScreenAdapter.height(96),
                    decoration: BoxDecoration(
                      color: Colors.grey[350],
                      borderRadius: BorderRadius.circular(40),
                    ),
                    child: Row(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(left: 10),
                          child: Icon(Icons.search),
                        ),
                        Text(
                          '搜索',
                          style:
                              TextStyle(fontSize: ScreenAdapter.fontSize(40)),
                        ),
                        // Padding(
                        //   padding:
                        //       EdgeInsets.only(top: 0, right: 5, bottom: 0),
                        //   child: Icon(CustomIcons.scan),
                        // )
                      ],
                    ),
                  ),
                ),
              ),
              actions: [
                TextButton(
                    onPressed: () {}, child: const Icon(CustomIcons.qrcode)),
                TextButton(
                    onPressed: () {}, child: const Icon(CustomIcons.fuwuguwen)),
              ],
            )));
  }
}
